<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="con">
    <h1>修改学生信息</h1>
    <form action="" method="post">
      <input type="hidden" name="id" id="id" value="">
      <p>
        <label for="class"> 班级：</label>
        <input type="text" name="clazz" id="clazz" />
      </p>
      <p>
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name" />
      </p>
      <p>
        <label for="gender">性别：</label>
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
      </p>
      <p>
        <label for="age">年龄：</label>
        <input type="text" name="age" id="age" />
      </p>
      <p>
        <label for="hobby">爱好：</label>
        <input type="checkbox" name="hobby" value="吃饭" /> 吃饭
        <input type="checkbox" name="hobby" value="睡觉" />睡觉
        <input type="checkbox" name="hobby" value="学习" />学习
      </p>
      <p>
        <label for="tel"> 手机号：</label><input type="text" name="tel" id="tel" />
      </p>
      <p>
        <label for="address"> 地址：</label>
        <select name="address" id="">
          <option value="郑州">郑州</option>
          <option value="洛阳">洛阳</option>
          <option value="新乡">新乡</option>
        </select>
      </p>
      <p>
        <label for="remark"> 备注：</label>
        <textarea name="remark" id="remark" cols="30" rows="10"></textarea>
      </p>
      <p>
        <label for="date">入学时间：</label>
        <input type="date" name="date" id="date" />
      </p>
      <p>
        <input type="submit" value="提交" />
      </p>
    </form>
  </div>
  <script src="./js/utils.js"></script>
  <script>
    // console.log(location.search.substring(location.search.indexOf('=') + 1));

    let id = location.hash.substring(1);
    //1 创建 XMLHttpRequest 对象
    let xhr = new XMLHttpRequest();

    //2 注册请求状态改变的回调函数
    xhr.onreadystatechange = function () {
      //5 判断请求状态为4
      if (xhr.readyState === 4) {
        //6 判断状态码
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
          let stu = JSON.parse(xhr.responseText)[0];
          console.log(stu);
          document.querySelector("#id").value = stu.id;
          document.querySelector("#clazz").value = stu.clazz;
          document.querySelector("#name").value = stu.name;
          document.querySelector("#age").value = stu.age;
          document.querySelector('input[value="' + stu.gender + '"]').checked = true;
          document.querySelector('option[value="' + stu.address + '"]').selected = true;
          document.querySelector("#tel").value = stu.tel;
          document.querySelector("#remark").value = stu.remark;
          document.querySelector("#date").value = stu.date;
          stu.hobby.forEach((v, i) => {
            document.querySelector('input[value="' + v + '"]').checked = true;
          });

        }
      }
    }
    //3 打开链接
    xhr.open("GET", "http://192.168.0.85:3008/api/student/getStudent?id=" + id)

    // 4 发送请求
    xhr.send();

    document.querySelector('form').onsubmit = function (e) {
      e.preventDefault();
      console.log(2);
      // $(this).serializeArray()

      let data = serializeKeyValue(this)
      console.log(decodeURI(data));

      // x = serializeJSObject(this)
      // console.log(x);

      //1 创建 XMLHttpRequest 对象
      let xhr = new XMLHttpRequest();

      //2 注册请求状态改变的回调函数
      xhr.onreadystatechange = function () {
        console.log(xhr.readyState);//请求状态0-4

        //6 判断请求状态为4
        if (xhr.readyState === 4) {
          //7 判断状态码
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            window.location.href = "index.html"
          }
        }
      }
      //3 打开链接, 设置请求方式和url
      xhr.open("POST", "http://192.168.0.85:3008/api/student/updateStudent");
      //4 设置请求数据为表单格式:
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      //5 发送请求, 添加请求数据
      xhr.send(data);
    }

  </script>
</body>

</html>